<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
    <style type="text/css">
        .error {
            color: red;
        }
    </style>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp" %>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">
        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->

            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user1.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span
                                                  class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user2.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user3.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user4.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->
        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                农产品列表
            </h3>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-3" style="width:320px">
                                    <label style="display: inline-block;padding: 6px 12px;height: 34px;float:left">产品编号:</label>
                                    <input type="text" id="parkNo" style="width:200px;"
                                           class="form-control pull-left" placeholder="产品编号"/>
                                </div>
                                <div class="col-xs-3" style="width:320px">
                                    <label style="display: inline-block;padding: 6px 12px;height: 34px;float:left">产品名称:</label>
                                    <input type="text" id="parkName" style="width:200px;" class="form-control pull-left"
                                           placeholder="产品名称"/>
                                </div>
                                <div class="col-xs-3" style="width:300px">
                                    <label style="display: inline-block;padding: 6px 12px;height: 34px;float:left">状态:</label>
                                    <select id="status" class="form-control pull-left" style="width:200px;">
                                        <option value="">---请选择---</option>
                                        <c:forEach var="item" items="${status}">
                                            <option value="${item.code}">${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="col-xs-3 pull-right">
                                    <button id="search" class="btn btn-primary pull-right">搜索</button>
                                </div>
                            </div>
                            <table id="dataTable" class="display" lay-filter="officeUser">

                            </table>

                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->
        <!--footer section start-->
        <%@ include file="/WEB-INF/include/footer.jsp" %>
        <!--footer section end-->

        <!-- 修改人员信息 -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modify"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">编辑人员信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="updateFrom" onsubmit="return false;">
                            <div class="form-group">
                                <label class="col-lg-3 col-sm-3 control-label">登录名</label>
                                <div class="col-lg-9">
                                    <input type="hidden" name="userId"/>
                                    <input type="text" class="form-control" readonly name="loginName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 col-sm-3 control-label">姓名</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" name="username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 col-sm-3 control-label">电话</label>
                                <div class="col-lg-9">
                                    <input type="text" class=" form-control" name="phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 col-sm-3 control-label">科室</label>
                                <div class="col-lg-9">
                                    <select name="office" class="form-control">
                                        <option value="">---请选择---</option>
                                        <c:forEach var="item" items="${offices}">
                                            <option value="${item.id}">${item.officeName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->
    </div>
    <!-- main content end-->
</section>
<%@ include file="/WEB-INF/include/js.jsp" %>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{#  if(d.status == '1'){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disabled">停用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{#  } else if(d.status=='2') { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enabled">启用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{#  } }}
</script>
<script type="text/html" id="statusTmp">
    {{#  if(d.status == '1' ){ }}
        正常
    {{#  } else　if(d.status == '2' ) { }}
   　    已停用
    {{#  } else　if(d.status == '3' ) { }}
    　   已删除
    {{#  } else { }}

    {{#  } }}
</script>
<script type="text/javascript">

    var phoneReg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

    $.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = phoneReg;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

    var table = layui.table;
    var tableIns = table.render({
        elem: '#dataTable'
        , height: 332
        , page: true
        , where: {
            parkNo: $('#parkNo').val(),
            status: $('#status').val(),
            parkName: $('#parkName').val()
        }
        , url: ctx + '/admin/getFarmParkList' //数据接口,
        , cellMinWidth: 80
        , page: true //开启分页
        , cols: [[ //表头
            {field: 'parkNo', title: '园区编号'}
            , {field: 'parkName', title: '园区名称'}
            , {field: 'contactPerson', title: '联系人'}
            , {field: 'phone', title: '联系电话'}
            , {field: 'mobilePhone', title: '手机号'}
            , {field: 'email', title: '邮箱'}
            , {field: 'statusName', title: '状态', templet:'#statusTmp'}
            , {fixed: 'right', width: 200, align: 'center', toolbar: '#toolbar'}
        ]]
    });

    table.on('tool(officeUser)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if(layEvent==='view'){
            window.location.href = ctx + '/admin/farmParkView?id=' + data.id;
        }
        if (layEvent === 'delete') { //查看
            layer.confirm('确认要删除此园区吗？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                utils.post({
                    url: ctx + '/admin/deleteFarmPark',
                    data: {
                        id: data.id
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('操作成功', {}, function () {
                                tableIns.reload();
                            });
                        } else {
                            layer.msg(data.message);
                        }
                    }
                });
            }, function () {

            });
        }
        if (layEvent === 'edit') {
           window.location.href=ctx + "/admin/editFarmPack?id=" + data.id;
        }
        if (layEvent === 'disabled') {
            layer.confirm('确认要停用此园区吗？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                utils.post({
                    url: ctx + '/admin/disableFarmPark',
                    data: {
                        id: data.id
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('操作成功', {}, function () {
                                tableIns.reload();
                            });
                        } else {
                            layer.msg(data.message);
                        }
                    }
                });
            }, function () {
            });
        }
        if (layEvent === 'enabled') {
            layer.confirm('确认要启用此园区吗？', {
                btn: ['确认', '取消']
            }, function () {
                utils.post({
                    url: ctx + '/admin/enableFarmPark',
                    data: {
                        id: data.id
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg('操作成功', {}, function () {
                                tableIns.reload();
                            });
                        } else {
                            layer.msg(data.message);
                        }
                    }
                });
            }, function () {
            });
        }
    });

    function initFormValidator() {
        $('#updateFrom').validate({
            rules: {
                username: {
                    required: true,
                    rangelength: [2, 20],
                },
                phone: {
                    required: true,
                    isMobile: true
                }
            },
            messages: {
                username: {
                    required: '请填写姓名',
                    rangelength: '请输入正确的姓名长度为2～20个字符'
                },
                phone: {
                    required: '请输入手机号码',
                    isMobile: '请输入正确的手机号码'
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            submitHandler: function (form) {
                var updateJSON = {
                    userId: $('input[name=userId]').val(),
                    phone: $('input[name=phone]').val(),
                    loginName: $('input[name=loginName]').val(),
                    username: $('input[name=username]').val(),
                    officeId: $('select[name=office]').val()
                };
                utils.post({
                    url: ctx + '/admin/updateOfficeUser',
                    data: updateJSON,
                    success: function (data) {
                        if (data.code == 200) {
                            $('#modify').modal('hide');
                            layer.msg('操作成功', {}, function () {
                                tableIns.reload();
                            });
                        } else {
                            layer.alert(data.message);
                        }
                    }
                });
            }
        });
    }


    function save() {
        $('#updateFrom').submit();
    }

    $(function () {
        $('#search').click(function () {
            tableIns.reload({
                where: {
                    parkNo: $('#parkNo').val(),
                    status: $('#status').val(),
                    parkName: $('#parkName').val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        });

        initFormValidator();
    });
</script>

</body>
</html>
